import React, { Component } from 'react';
import { Form, Input, Button, message } from 'antd';
import NextResetPassword from './NextResetPassword';
import ResetResult from './ResetResult';
import CheckInput from '../../../utils/checkInput/CheckInput';

class ResetPassword extends Component {
  formRef = React.createRef();
  constructor(props) {
    super(props);
    this.state = {
      step: 1,
      second: 60,
      hasNote: false,
      phonePar: {
        phone: '',
        code: '',
      },
    };
    this.times = '';
  }

  componentDidMount() {}

  componentWillUnmount() {
    this.times && clearInterval(this.times);
  }

  render() {
    return <div>{this.makeStepView()}</div>;
  }

  makeStepView() {
    let { hasNote, second, phonePar } = this.state;

    switch ('' + this.state.step) {
      case '3': // 重置密码的结果
        return (
          <ResetResult
            {...{
              ...this.props,
              ...this.state.phonePar,
            }}
            callBack={() => {}}
          />
        );

      case '2': // 设置密码
        return (
          <NextResetPassword
            callBack={data => {
              this.setState({ step: 3 });
            }}
          />
        );

      case '1': // 获取验证码步骤
      default:
        return (
          <div className={'RPCss'}>
            <div>
              <h1>重置密码</h1>
              <span>验证手机号后，重置登录密码</span>
              <Form
                ref={this.formRef}
                autoComplete="off"
                className={'formCss'}
                onFinish={this.onSubmit}
              >
                <Form.Item
                  name={'phone'}
                  rules={[
                    { required: true, message: '手机号不能为空!' },
                    {
                      validator: (rule, value, callback) =>
                        this.checkValidator(rule, value, callback),
                    },
                  ]}
                >
                  <Input maxLength={11} placeholder="请输入手机号" />
                </Form.Item>
                <div style={{ position: 'relative' }}>
                  <Form.Item
                    className={'formItem'}
                    name={'code'}
                    rules={[{ required: true, message: '短信验证码不能为空!' }]}
                  >
                    <Input maxLength={8} placeholder={'短信验证码'} />
                  </Form.Item>
                  <a
                    style={{ position: 'absolute', top: 10, right: 115 }}
                    onClick={() => {
                      if (hasNote) return false;
                      let phone = this.formRef.current.getFieldValue('phone');
                      let setFields = this.formRef.current.setFields;
                      if (phone === undefined || phone === '') {
                        setFields([
                          {
                            name: 'phone',
                            value: phone,
                            errors: ['请先输入手机号'],
                          },
                        ]);
                        return;
                      }

                      message.success('验证码发送成功!');
                      this.setState({ hasNote: true }, () => {
                        this.times = setInterval(() => {
                          this.setState({ second: --second }, () => {
                            if (second <= 0) {
                              clearInterval(this.times);
                              this.setState({
                                hasNote: false,
                                second: 60,
                              });
                            }
                          });
                        }, 1000);
                      });
                    }}
                  >
                    {!hasNote ? '获取短信验证码' : `${second} s`}
                  </a>
                </div>
                <Form.Item>
                  <Button type="primary" htmlType="submit">
                    下一步
                  </Button>
                </Form.Item>
              </Form>
              <a onClick={() => this.props.history.push('/login/index')}>
                返回登录
              </a>
            </div>
          </div>
        );
    }
  }

  checkValidator(rule, value, callback) {
    if (value && !CheckInput.isPhoneNumber(value)) {
      callback('请输入正确的手机号！');
      return false;
    }
    callback();
  }

  onSubmit = value => {
    this.setState({ step: 2 });
  };
}

export default ResetPassword;
